<template>
  <div>
    <header>订单确认</header>
    <main>
      <div class="address">
        <div>收货地址</div>
        <div class="address-list">
          <!-- 渲染的是每个地址的信息 但有可能没有地址-->
          <div
            class="item-list"
            :class="{ active: isActive == index }"
            v-for="(item, index) in addressList"
            :key="item.id"
            @click="isActive = index"
          >
            <div>{{ item.name }}</div>
            <div>{{ item.phone }}</div>
            <div>{{ item.area_name }}</div>
            <div>{{ item.desc }}</div>
            <div>{{ item.post_code }}</div>
            <div>
              <!-- item是地址对象信息 -->
              <button @click="del(item)">删除</button>
              <button @click="edit(item)">修改</button>
            </div>
          </div>
          <!-- 永远存在,用来给用户做添加的操作 -->
          <div class="item-list">
            <div class="add" @click="add">添加地址</div>
          </div>
        </div>
      </div>
      <div class="goods-list">渲染购物车勾选的商品信息</div>
      <div class="goods-total">
        总计信息。。。
        <div><el-button @click="sumbitOrder">去结算</el-button></div>
      </div>
    </main>
    <footer></footer>
    <Modal
      :title="'添加地址'"
      v-show="addModal"
      :btnType="3"
      @submit="submitAddress"
      @cancel="close"
    >
      <template v-slot:body>
        <div>
          <div>
            姓名
            <input type="text" v-model="userIpt.name" />
          </div>
          <div>
            手机
            <input type="text" v-model="userIpt.phone" />
          </div>
          <div>
            地区
            <el-cascader
              ref="cityNode2"
              :options="options"
              @change="handleChange2"
              v-model="userIpt.area"
            ></el-cascader>
          </div>
          <div>
            详细地址
            <input type="text" v-model="userIpt.desc" />
          </div>
          <div>
            邮政编码
            <input type="text" v-model="userIpt.post_code" />
          </div>
        </div>
      </template>
    </Modal>
    <Modal
      :title="'修改地址'"
      v-show="emitModal"
      :btnType="3"
      @submit="submitAddress"
      @cancel="close"
    >
      <template v-slot:body>
        <div>
          <div>
            姓名
            <input type="text" v-model="userIpt2.name" />
          </div>
          <div>
            手机
            <input type="text" v-model="userIpt2.phone" />
          </div>
          <div>
            地区
            <el-cascader
              ref="cityNode"
              :options="options"
              @change="handleChange"
              v-model="userIpt2.area"
            ></el-cascader>
          </div>
          <div>
            详细地址
            <input type="text" v-model="userIpt2.desc" />
          </div>
          <div>
            邮政编码
            <input type="text" v-model="userIpt2.post_code" />
          </div>
        </div>
      </template>
    </Modal>
    <Modal
      :title="'提示'"
      v-show="delModal"
      :btnType="3"
      @submit="submitAddress"
      @cancel="close"
    >
      <template v-slot:body>
        <div>你确定要删除这个商品吗？</div>
      </template>
    </Modal>
  </div>
</template>

<script>
import Modal from "../components/Modal.vue";
import {
  Address,
  getCity,
  getAddress,
  updateAddress,
  delAddress,
  getOrder,
} from "../assets/request";
export default {
  components: {
    Modal,
  },
  data() {
    return {
      isActive: 0,
      userAction: null, //0 是添加 1 是修改 2 是删除
      delModal: false,
      area_name: "",
      addModal: false, //控制添加弹窗
      emitModal: false,
      options: [],
      addressList: [],
      userIpt: {
        name: "",
        phone: "",
        area: "",
        desc: "",
        goodlist: "",
        post_code: "",
      },
      userIpt2: {
        name: "",
        phone: "",
        area: "",
        desc: "",
        goodlist: "",
        post_code: "",
      },
    };
  },
  async created() {
    this.options = await getCity();
    this.addressList = await getAddress();
    this.goodlist = JSON.parse(sessionStorage.getItem("goodslist"));
    // console.log(this.goodlist);

    // 获取一下地址
  },
  methods: {
    async sumbitOrder() {
      // addr_id 这个参数 我们通过选择对应的地址 即可获取对应地址的id

      let item = this.addressList[this.isActive];
      // item 是用户选择的地址对象
      // 因为此时item 有没有可能为null
      // 用户第一次进入这里,地址还没填写,但是却按下了结算按钮

      if (!item) {
        //地址是空的
        this.$message.error("至少选择一个地址");
        return;
      }
      let goods_info = this.goodlist.map((ele) => {
        return { id: ele.goods_id, num: ele.num };
      });
      // console.log(goods_info);
      let shoppingCartIds = this.goodlist.map((ele) => ele.goods_id);
      // console.log(shoppingCartIds);
      // goods_info   shoppingCartIds 这两个参数都是跟勾选的商品有关系
      // 昨天最后说过 勾选的商品 放在缓冲里面
      // -发送订单请求
      await getOrder({
        goods_info,
        addr_id: item.id,
        shoppingCartIds,
      });
      this.$router.push("/order/orderlist");
      // -跳转到订单列表页面
    },
    // 获取三级联动地区的cb
    handleChange(value) {
      // 当三级联动的选择框完毕之后 触发回调函数
      // value 是地区的id
      console.log(value);
      // 获取地区名称 设置ref去获取
      // 获取到了 三级联动的组件,我们就可以调用这个组件中的属性和方法
      // console.log(this.$refs.cityNode.getCheckedNodes()[0].pathLabels.join(""));
      this.area_name = this.$refs.cityNode
        .getCheckedNodes()[0]
        .pathLabels.join("");
    },
    handleChange2(value) {
      // 当三级联动的选择框完毕之后 触发回调函数
      // value 是地区的id
      console.log(value);
      // 获取地区名称 设置ref去获取
      // 获取到了 三级联动的组件,我们就可以调用这个组件中的属性和方法
      // console.log(this.$refs.cityNode.getCheckedNodes()[0].pathLabels.join(""));
      this.area_name = this.$refs.cityNode2
        .getCheckedNodes()[0]
        .pathLabels.join("");
    },
    add() {
      // 打开添加弹窗
      this.addModal = true;
      this.userAction = 0;
      this.userIpt = {
        name: "",
        phone: "",
        area: "",
        desc: "",
        post_code: "",
      };
    },
    // 修改

    edit(item) {
      this.emitModal = true;
      this.userAction = 1;
      // item 中的area是字符串,但是这里要是数组才能v-model出对应的内容
      // 3,2,3=>[3,2,3] 里面的每个元素都是number类型 =》str array API
      // 判断是不是数组
      if (item.area instanceof Array) {
      } else {
        item.area = item.area.split(",").map((ele) => Number(ele));
      }
      this.userIpt = item;

      this.userIpt2 = {
        name: item.name,
        phone: item.phone,
        area: item.area,
        desc: item.desc,
        goodlist: item.goodlist,
        post_code: item.post_code,
      };
    },
    // 删除
    del(item) {
      this.delModal = true;
      this.userAction = 2;

      // 打开删除的弹窗
    },
    async submitAddress() {
      // 不管是修改 删除 添加按下确定都会触发的回调函数
      // 区分当前你要发的请求是哪个？
      // 新增一个属性 userAction 来判断用户的行为
      // userAction 只有页面初始化的时候才是null
      // submitAddress这个函数执行 一定要按确定按钮之后才执行
      // 确定的按钮的显示 是一定要执行 add edit del 某一个 都会userAction 都会赋值
      // userAction 不存在有null值的机会 只有刷新的时候才有

      if (this.userAction === 0) {
        console.log("发送添加请求");
        console.log(this.userIpt);
        // // 准备对应的参数
        let { name, phone, area, desc, post_code } = this.userIpt;
        // area 是一个数组 但是后台要求我们传递的是字符串
        await Address({
          name,
          phone,
          area: area.toString(),
          desc,
          post_code,
          area_name: this.area_name,
        });
        this.addressList = await getAddress();

        console.log(this.userIpt);
      } else if (this.userAction === 1) {
        let { name, phone, area, desc, post_code } = this.userIpt2;
        let item_id = this.addressList[this.isActive].id;
        let item_name = this.addressList[this.isActive].area_name;
        await updateAddress(item_id, {
          name,
          phone,
          area: area.toString(),
          desc,
          post_code,
          area_name: item_name,
        });
        this.addressList = await getAddress();
        console.log("发送修改请求");
      } else {
        let del_id = this.addressList[this.isActive].id;
        await delAddress(del_id);
        this.addressList = await getAddress();
        console.log("删除");
      }
      // 不管发哪个请求都要关闭弹窗
      this.close();
    },
    close() {
      this.addModal = false;
      this.delModal = false;
      this.emitModal = false;
      // 清空大对象
    },
    // async newAddress() {
    //   let { name, phone, area, desc, post_code } = this.userIpt;
    //   // area 是一个数组 但是后台要求我们传递的是字符串
    //   await Address({
    //     name,
    //     phone,
    //     area: area.toString(),
    //     desc,
    //     post_code,
    //     area_name: this.area_name,
    //   });
    //   this.addModal = false;
    //   this.addressList = await getAddress();
    // },
    // handerDel() {
    //   this.delModal = false;
    //   console.log("发送请求");
    // },
  },
};
</script>

<style lang="scss" scoped>
header {
  width: 1226px;
  height: 120px;
  background: pink;
  margin: 0 auto;
  text-align: center;
}
main {
  text-align: center;
  .address-list {
    width: 1226px;
    margin: 0 auto;
    background: yellow;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;

    .item-list {
      width: 23%;
      height: 200px;
      background: skyblue;
      margin: 5px 12px;
      position: relative;
      &.active {
        border: 1px solid black;
      }
      div {
        width: 100%;
        height: 35px;
      }
      .add {
        position: absolute;
        left: 50%;
        top: 50%;
        width: 50px;
        line-height: 40px;
        transform: translate(-50%, -50%);
        background: pink;
      }
    }
  }
}
footer {
  width: 1226px;
  height: 220px;
  background: pink;
  margin: 0 auto;
  text-align: center;
}
</style>